<template>
  <div class="page-navbar">
    <div class="page-title">Navbar</div>
    <mt-navbar class="page-part" v-model="selected">
      <mt-tab-item id="1">选项一</mt-tab-item>
      <mt-tab-item id="2">选项二</mt-tab-item>
      <mt-tab-item id="3">选项三</mt-tab-item>
    </mt-navbar>

    <div>
      <mt-cell class="page-part" title="当前选中">{{ selected }}</mt-cell>
    </div>

    <mt-tab-container v-model="selected">
      <mt-tab-container-item id="1">
        <mt-cell v-for="n in 10" :title="'内容 ' + n" :key="n" />
      </mt-tab-container-item>
      <mt-tab-container-item id="2">
        <mt-cell v-for="n in 4" :title="'测试 ' + n" :key="n"/>
      </mt-tab-container-item>
      <mt-tab-container-item id="3">
        <mt-cell v-for="n in 6" :title="'选项 ' + n" :key="n" />
      </mt-tab-container-item>
    </mt-tab-container>
  </div>
</template>
<script type="text/ecmascript-6">

  import Vue from 'vue';
  import Navbar from 'mint-ui/lib/navbar';
  import 'mint-ui/lib/navbar/style.css';

  import TabItem from 'mint-ui/lib/tab-item';
  import 'mint-ui/lib/tab-item/style.css';

  import Cell from 'mint-ui/lib/cell';
  import 'mint-ui/lib/cell/style.css';

  import TabContainer from 'mint-ui/lib/tab-container';
  import 'mint-ui/lib/tab-container/style.css';

  import TabContainerItem from 'mint-ui/lib/tab-container-item';
  import 'mint-ui/lib/tab-container-item/style.css';

  Vue.component(Navbar.name,Navbar)
  Vue.component(TabItem.name, TabItem)

  Vue.component(Cell.name,Cell)
  Vue.component(TabContainer.name, TabContainer);
  Vue.component(TabContainerItem.name, TabContainerItem);


    export default {
        data() {
            return {
              selected: '1'
            }
        }
    }
</script>
